<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>
	<div class="accordionbox">
		<ul id="accordion" class="accordion">
			<li>
				<div class="province"><i class="addopen"></i>轨道交通<i class=""></i></div>
				<ul class="submenu">
					<li>
						<span class="province2">合肥</span>
						<ul class="submenu2">
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>
					<li>
						<span class="province2">芜湖</span>
						<ul class="submenu2">
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>
					<li>
						<span class="province2">蚌埠</span>
						<ul class="submenu2">
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>
					<li>
						<span class="province2">淮南</span>
						<ul class="submenu2">
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>
					<li>
						<span class="province2">马鞍山</span>
						<ul class="submenu2">
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>
					<li><span>淮北</span></li>
					<li><span>淮南</span></li>
					<li><span>铜陵</span></li>
					<li><span>安庆</span></li>
					<li><span>黄山</span></li>
					<li><span>滁州</span></li>
				</ul>
			</li>
			<li>
				<div class="province"><i class="addopen"></i>轨道交通</div>
				<ul class="submenu">
					<li><span>澳门特别行政区</span></li>
					<li><span>澳门</span></li>
				</ul>
			</li>
			<li>
				<div class="province"><i class="addopen"></i>轨道交通</div>
				<ul class="submenu">
					<li><span>东城</span></li>
					<li><span>西城</span></li>
					<li><span>崇文</span></li>
					<li><span>宣武</span></li>
					<li><span>朝阳</span></li>
					<li><span>丰台</span></li>
					<li><span>石景山</span></li>
					<li><span>海淀</span></li>
					<li><span>门头沟</span></li>
				</ul>
			</li>
			<li>
				<div class="province"><i class="addopen"></i>轨道交通</div>
				<ul class="submenu">
					<li>
						<span>重庆</span>
						<ul>
							<li>222</li>
							<li>333</li>
							<li>444</li>
						</ul>
					</li>

					<li><span>重庆</span></li>
				</ul>
			</li>
			<li>
				<div class="province"><i class="addopen"></i>F 福建</div>
				<ul class="submenu">
					<li><span>福州</span></li>
					<li><span>厦门</span></li>
					<li><span>莆田</span></li>
					<li><span>三明</span></li>
				</ul>
			</li>
			<li>
				<div class="province"><i class="addopen"></i>G 广东</div>
				<ul class="submenu">
					<li><span>广州</span></li>
					<li><span>韶关</span></li>
					<li><span>深圳</span></li>
					<li><span>珠海</span></li>
					<li><span>汕头</span></li>
					<li><span>佛山</span></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
	var Accordion = function(el, multiple) {
			this.el = el || {};
			this.multiple = multiple || false;
		// Variables privadas
		var links = this.el.find('.province');
    var link = this.el.find('.province2');
		// Evento
		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
		link.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
	}
	Accordion.prototype.dropdown = function(e) {
		var $el = e.data.el;
		$this = $(this),
		$next = $this.next();
		$next.stop().slideToggle();
		var index= $this.parent().index();
		$this.parent().toggleClass(index);
		$this.toggleClass("downicon");
		// if (!e.data.multiple) {
		// 	$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
		// };
	}
	var accordion = new Accordion($('.accordion'), false);
</script>

</html>